import { useState } from 'react';
import {
    Card,
    Flex,
    InputItem,
    WhiteSpace,
    WingBlank,
    Button,
    Toast,
} from 'antd-mobile';

import './index.css';
import * as userApi from '../../api/user';

export default ({ history, ...props }) => {
    const [mobile, setMobile] = useState('');
    const [code, setCode] = useState('');

    // this.state = { lock: false, };
    const [lock, setLock] = useState(false);
    const [btnText, setBtnText] = useState('获取验证码');

    /**
     * 获取验证码
     */
    const handleGetCodeClick = () => {
        if (!mobile) {
            Toast.fail('请输入手机号');
            return;
        }
        if (!/^1[3-9][\d]{9}$/.test(mobile)) {
            Toast.fail('手机号格式不正确');
            return;
        }
        if (!lock) {
            // this.setState({ lock: true });
            setLock(true);
            // 再次获取验证的时间
            let currentTime = 4;
            setBtnText(`重新获取验证码(${currentTime})`);
            // 设置倒计时效果
            const iid = setInterval(() => {
                if (currentTime > 1) {
                    currentTime--;
                    setBtnText(`重新获取验证码(${currentTime})`);
                    return;
                }
                clearInterval(iid);
                setBtnText('获取验证码');
                setLock(false);
            }, 1000);
            // 请求后台，给用户发送验证码
            sendCode(mobile);
        }
    };

    /**
     * 请求后台发送验证码
     */
    const sendCode = async (mobile) => {
        const res = await userApi.sendCode(mobile);
        console.log(res);
    };

    const handleLogin = async () => {
        // console.log(mobile, code);
        if (!mobile || !code) {
            Toast.fail('请输入必须参数');
            return;
        }
        // 去登录
        const res = await userApi.login(mobile, code);
        if (res.code !== 200) {
            Toast.fail(res.message);
            return;
        }
        // 登录成功了，保存登录态（token 和 user 信息）
        window.sessionStorage.setItem('token', res.data.token);
        // user 是一个对象，必须转成字符串，才能存储，再使用时，再使用 JSON.parse() 转成对象
        window.sessionStorage.setItem('user', JSON.stringify(res.data.user));
        // 跳转到首页
        history.push('/');
    };

    return (
        <div className="login-page">
            <WingBlank size="lg">
                <WhiteSpace size="lg" />
                <Card>
                    <Card.Header title="手机号登录" />
                    <Card.Body>
                        <InputItem
                            placeholder="请输入手机号"
                            onChange={(val) => setMobile(val)}
                        ></InputItem>
                        <Flex>
                            <Flex.Item>
                                <InputItem
                                    placeholder="请输入验证码"
                                    onChange={(val) => setCode(val)}
                                ></InputItem>
                            </Flex.Item>

                            <Flex.Item>
                                <Button
                                    type="primary"
                                    size="small"
                                    onClick={handleGetCodeClick}
                                    disabled={lock}
                                >
                                    {btnText}
                                </Button>
                            </Flex.Item>
                        </Flex>

                        <Button type="ghost" onClick={handleLogin}>
                            登录
                        </Button>
                    </Card.Body>
                </Card>
                <WhiteSpace size="lg" />
            </WingBlank>
        </div>
    );
};
